Sep 2021

CN Helper - Tokenator

Bulma
Svelte
Webpack

An add-on for CN Helper chrome extension rendered in the form of a single-page application. Very useful for generating responses that follow the same template.

WHY?

Part of our job requires sending "canned" responses (repeatedly sent mail based on a template). We used an excel table for generating these responses based on the selected sheet and cells filled. I wanted to find a quicker solution.

WHAT?

The idea was to have a GUI that would generate the response quicker, have better UX and it had to eliminate the number of copy&paste clicks. As we already use CN Helper, I could just implement this solution inside of it. Besides that, it gave me a chance to try out Svelte - a new JavaScript compiler that really caught my eye - and this was the perfect opportunity.

HOW?

Tokenator is sort of a SPA - a form with textarea as its main element and other form elements where data is filled by the user or automatically. It is rendered by a chrome extension and integrates with our internal tool for generating tokens. It uses Svelte's reactive declarations which "will automatically recompute logic that depends on state variables when Svelte state is updated". Every time the value of form elements changes, the value of textarea changes. As this response must be copied and pasted in another application, I had to make this transition easy as possible so they don't have to do any formatting in another application (notepad, for example). When the user builds a response, they only have to click the "Format&Copy" button which formats and copies the text so it can be used immediately. For styling, I used the CSS framework Bulma.


CONCLUSION

This add-on for CN Helper eliminated the need for the use of an excel table, sped up the entire process of building new canned responses and significantly reduced the chance of error. The application basically stayed the same to this day because it fulfills its specific purpose - but another idea came to my mind and it's currently in the development process.

UPDATE 04/2022 - Migrated from rollup to webpack.
UPDATE 03/2022 - The project is now hosted within a company's own infrastructure.